<!doctype html>
<html>
  <head>
    <title>Basic Animations</title>
    <script src="../../../polymer/polymer.js"></script>
    <link rel="import" href="../../elements/g-app.html">
    <link rel="import" href="../../elements/animation/g-animation-group.html">
  </head>
  <body>
    <polymer-element name="x-ball">
      <template>
        <style>
          @host {
            * {
              display: inline-block;
              box-sizing: border-box;
              min-width: 50px;
              min-height: 50px;
              border-radius: 25px;
              background: orange;
              border: 4px solid black;
            }
          }
          
          g-animation-group {
            display: none;
          }
        </style>
        <g-animation-group id="animation" type="seq" iterationCount="1e9" target="{{}}">
          <g-animation duration="1">  
            <g-property name="transform">
              <g-keyframe value="translate3d(0%,0,0)"></g-keyframe>
              <g-keyframe value="translate3d(200%,0,0)"></g-keyframe>
            </g-property>
          </g-animation>
            <g-animation duration="1">  
            <g-property name="transform">
              <g-keyframe value="translate3d(200%,0%,0)"></g-keyframe>
              <g-keyframe value="translate3d(200%,200%,0)"></g-keyframe>
            </g-property>
          </g-animation>
          <g-animation duration="1">  
            <g-property name="transform">
              <g-keyframe value="translate3d(200%,200%,0)"></g-keyframe>
              <g-keyframe value="translate3d(0%,200%,0)"></g-keyframe>
            </g-property>
          </g-animation>
          <g-animation duration="1">  
            <g-property name="transform">
              <g-keyframe value="translate3d(0%,200%,0)"></g-keyframe>
              <g-keyframe value="translate3d(0%,0%,0)"></g-keyframe>
            </g-property>
          </g-animation>
        </g-animation-group>
        <content></content>
      </template>
      <script>
        Polymer('x-ball', {
          ready: function() {
            this.$.animation.play();
          }
        });
      </script>
    </polymer-element>
    
    <polymer-element name="my-app" extends="g-app">
      <template>
        <style>
          @host {
            * {
              background: steelblue;
            }
          }
          
          .nested {
            height: 160px;
            width: 160px;
          }
        </style>
        <g-animation id="animation" duration="1" iterationCount="1e9" direction="alternate" target="{{$.one}}">
          <g-property name="opacity">
            <g-keyframe value="1"></g-keyframe>
            <g-keyframe value="0"></g-keyframe>
          </g-property>
        </g-animation>
        <div id="one">Hi there</div>
        <div>
          <x-ball></x-ball>
          <x-ball></x-ball>
          <x-ball class="nested"><x-ball></x-ball></x-ball>
        </div>
      </template>
      <script>
        Polymer('my-app', {
          ready: function() {
            this.super();
            this.$.animation.play();
          }
        });
      </script>
    </polymer-element>
    <my-app id="app"></my-app>
  </body>
</html>
